<template>
  <div class="chart-wrapper">
    <canvas ref="chartCanvas"></canvas>
    <div class="chart-center-text">
      <span class="percentage">{{ percentage }}%</span>
      <span class="label">覆盖率</span>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { Chart, registerables } from 'chart.js'

Chart.register(...registerables)

export default {
  name: 'CoverageChart',
  props: {
    percentage: {
      type: Number,
      default: 85
    }
  },
  setup(props) {
    const chartCanvas = ref(null)
    let chartInstance = null

    const createChart = () => {
      if (chartInstance) {
        chartInstance.destroy()
      }

      const ctx = chartCanvas.value.getContext('2d')
      chartInstance = new Chart(ctx, {
        type: 'doughnut',
        data: {
          datasets: [{
            data: [props.percentage, 100 - props.percentage],
            backgroundColor: ['#10b981', '#e5e7eb'],
            borderWidth: 0,
            cutout: '70%'
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              enabled: false
            }
          }
        }
      })
    }

    onMounted(() => {
      createChart()
    })

    watch(() => props.percentage, () => {
      createChart()
    })

    return {
      chartCanvas
    }
  }
}
</script>

<style scoped>
.chart-wrapper {
  position: relative;
  width: 100%;
  height: 120px;
}

.chart-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.percentage {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #10b981;
}

.label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}
</style>